const classNames = [
  { name: "triangle1", flag: false },
  { name: "rhomb", flag: false },
  { name: "twinGon", flag: true },
  { name: "rhomBase", flag: false },
  { name: "twinBase", flag: true },
];

const sceneEle = document.querySelector("#scene");
const frag = document.createDocumentFragment();
classNames.forEach((item) => {
  if (!item.flag) {
    for (let i = 0; i < 8; i++) {
      const ele = document.createElement("div");
      ele.classList.add(item.name);
      frag.appendChild(ele);
    }
  } else {
    for (let i = 0; i < 16; i++) {
      const ele = document.createElement("div");
      ele.classList.add(item.name);
      if (i < 8) {
        ele.classList.add("left");
      } else {
        ele.classList.add("right");
      }
      frag.appendChild(ele);
    }
  }
});

sceneEle.appendChild(frag);
const divEle = document.createElement("div");
divEle.setAttribute("id", "octaTop");
sceneEle.appendChild(divEle);
